<template>
  <div>
    <div class="header">
      <div class="header-left">
        <div class="iconfont" style="font-size: .4rem">&#xe624;</div>
      </div>
      <div class="header-iniput">
        <span class="iconfont">&#xe632;</span>
        输入城市/景点/游玩主题
      </div>
      <router-link to="/city">
        <div class="header-right">
          {{this.nowCity}}
          <span class="iconfont" style="font-size: .26rem">&#xe64a;</span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: "header",
    computed:{
      ...mapState(['nowCity'])
    }
  }
</script>

<style lang="stylus" scoped >
  /*报错其实不是真的错*/
  @import "~css/varibles.styl";
  .header{ display:flex;line-height: .86rem;background: $bgColor;color: #fff}
  .header-left{ width: .64rem;float: left;text-align: center;font-size: .2rem}
  .header-iniput{ flex: 1;height: .64rem;line-height: .64rem;margin-top:0.12rem;
    margin-left: 0.2rem;background: #ffff;border-radius: .1rem;color: #ccc;padding-left:.2rem}
  .header-right{ min-width: 1.04rem;float: right;text-align: center;color: #fff;padding:0 .1rem}
</style>
